<template>

  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/goods'}">商品</el-breadcrumb-item>
        <el-breadcrumb-item>商品收发汇总</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end 面包屑-->
    <!--start content-->
    <div class="content goodsContent">

      <!--高级搜索  start -->
      <!--<div class="height-search">
        <transition name="fade">
          <div class="modal-backdrop" v-show="heightSearch"></div>
        </transition>
        <transition name="slideDown">
          <div class="height-s-con dingdan-shu" v-show="heightSearch">
            <p class="search-title">高级搜索</p>
            <el-form ref="Form" :model="form" label-width="80px">
              <el-form-item label="商品信息" prop="memberName">
                <el-input v-model="form.memberName"></el-input>
              </el-form-item>
		          <el-form-item label="商品分类" prop="orderPayState">
					    <el-select v-model="form.value4" placeholder="请选择">
						    <el-option
						      v-for="item in form.options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
					  </el-select>
					</el-form-item>
					<el-form-item label="商品品牌">
					 <el-select v-model="form.value5" multiple placeholder="请选择">
					    <el-option
					      v-for="item in form.options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
					</el-form-item>
		              <el-form-item label="时间选择" prop="level" min-width="220px">
		                <el-date-picker v-model="form.createTime" type="daterange" placeholder="选择日期范围">
		                </el-date-picker>
		              </el-form-item>
              <el-form-item label-width="15px">
                <el-button @click="aqueryFundMerchantListByPage(form.memberName,form.ddlistKey)" type="primary">确定</el-button>
                <el-button @click="searchCancel">取消</el-button>
                <el-button @click="searchClear" type="text">清空</el-button>
              </el-form-item>
            </el-form>

          </div>
        </transition>
      </div>-->
      <!--高级搜索  end-->

      <!--ziJin-conOrder  start-->
      <div class="ziJin-conOrder">
        <!--头部  start-->
        <!--<div class="piliangCao sousuo " v-if="sousuo">
					搜索结果
					<em style="font-style: normal;margin: 0px 20px;">|</em>
					<a @click="qingchu"><em class="iconfont">&#xe66b;</em>清除搜索</a>
					<a @click="jixusou"><em class="iconfont">&#xe62d;</em>继续搜索</a>
				</div>-->
        <div class="zJ-header1">
            <div class="slideBtn fl manyPay">
	            <el-select v-model="house"  placeholder="全部仓库" @change="queryByDataBillstate">
								<el-option label='全部仓库' value=''>
									全部仓库
								</el-option>
								<el-option v-for="item in houseBox" :label="item.ddlistName" :value="item.ddlistKey"></el-option>
							</el-select>
					</div>

            <div class="block fl dingdanshou">
              <el-date-picker
                v-model="valueData"
                :picker-options="dateTimeMethod"
                type="daterange"
                @change="dateChange"
                placeholder="选择日期范围">
              </el-date-picker>
            </div>
            <div class="public-left clearfix">
              <div class="goods-input">
                <input type="text" v-model="fullTextFilterStr" placeholder="请输入商品编码" @keydown.enter="queryByPage"/><i @click="queryByPage"></i>
              </div>
              <!--<span class="fl high_search" @click="heightSearch=true">高级搜索</span>-->
            </div>
            <!--<el-button type="primary" class="fr">导出</el-button>-->
          </div>
        </div>
        <!--头部   end-->

        <!--资金块状展示  start-->
        <div class="moneyList">
	        <div class="moneyListCon">
	            <div class="div1" style="background: #fca489;">
	              <div class="fund-totalBlance-val">{{StockGoodsListData.goodsOpeningMoney}}</div>
	              <div class="fund-totalBlance-txt">期初成本金额</div>
	            </div>
	        </div>
          <div class="moneyListCon">
            <div class="div1">
              <div class="fund-totalBlance-val">{{StockGoodsListData.goodsOpeningMoney}}</div>
              <div class="fund-totalBlance-txt">入库成本金额</div>
            </div>
          </div>
          <div class="moneyListCon">
            <div class="div2">
              <div class="fund-totalBlance-val">{{StockGoodsListData.goodsOpeningMoney}}</div>
              <div class="fund-totalBlance-txt">出库成本金额</div>
            </div>
          </div>
          <div class="moneyListCon">
            <div class="div3">
              <div class="fund-totalBlance-val">{{StockGoodsListData.goodsOpeningMoney}}</div>
              <div class="fund-totalBlance-txt">期末成本金额</div>
            </div>
          </div>
        </div>
        <!--资金块状展示  end-->

        <!--table表格   start-->
        <div class="table-box" ref="contentWrap">
          <el-table
            :data="StockGoodsListData"
            style="width: 100%" :max-height="vue_tableH">
            <el-table-column
              prop="goodsCode"
              label="商品编号"
              width="150">
            </el-table-column>

            <!--<el-table-column
              label="客户名称"
              width="120"
              prop="memberName">
             <template scope="scope">
                <p class="goTo" v-html='scope.row.memberName' @click="goTo"></p>
              </template>
            </el-table-column>-->

            <el-table-column
              prop="goodsSkuValue"
              label="规格"
              width="180">
            </el-table-column>
            <el-table-column
              prop="warehouseName"
              label="所属仓库"
              width="180">
            </el-table-column>
            <el-table-column
              prop="goodsNumUnit"
              label="单位"
              width="100">
            </el-table-column>
             <el-table-column
              label="期初"
              align="center" style="height: 50px;">
	            <el-table-column
	              label="数量"
	              width="120"
	              prop="goodsNum">
	            </el-table-column>
	            <el-table-column
	              label="成本金额"
	              width="120"
	              prop="goodsOpeningMoney">
	            </el-table-column>
            </el-table-column>
            <el-table-column
              label="入库"
              align="center" style="height: 50px;">
	            <el-table-column
	              label="数量"
	              width="120"
	              prop="addStockNumSum">
	            </el-table-column>
	            <el-table-column
	              label="成本金额"
	              width="120"
	              prop="addStockPriceSum">
	            </el-table-column>
            </el-table-column>
            <el-table-column
              label="出库"
              align="center" style="height: 50px;">
	            <el-table-column
	              label="数量"
	              width="120"
	              prop="outStockNumSum">
	            </el-table-column>
	            <el-table-column
	              label="成本金额"
	              width="120"
	              prop="outStockPriceSum">
	            </el-table-column>
            </el-table-column>
            <el-table-column
              label="期末"
              align="center" style="height: 50px;">
	            <el-table-column
	              label="数量"
	              width="120"
	              prop="goodsNowNum">
	            </el-table-column>
	            <el-table-column
	              label="成本金额"
	              width="120"
	              prop="goodsClosingMoney">
	            </el-table-column>
            </el-table-column>
            <el-table-column
              fixed="right" 
              label=""
              width="60">
              <template scope="scope">
                <el-popover trigger="hover" placement="bottom">
                  <p class="p" style="cursor: pointer;" @click="pp(scope.row.orderCode)"><em class="iconfont"  style="font-size: 15px">&#xe656;</em>明细</p>
                  <div slot="reference" class="name-wrapper" v-if="scope.row.accountReceivable!='0.00'">
                    <em class="iconfont tab-hover">&#xe607;</em>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!--table表格  end-->

        <!--分页  start-->
        <div class="block fen">
          <el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="parseInt(pageTools.pageNo)"
						:page-sizes="pageTools.pageSizeOptions"
						:page-size="parseInt(pageTools.pageSize)"
						:total="parseInt(pageTools.recordCount)"
						layout="total, prev, pager, next, sizes,jumper">
					</el-pagination>
        </div>
        <!--分页  end-->

      </div>
      <!--ziJin-conOrder  start-->

    </div>
    <!--end content-->


  </section>

</template>
<script>
  export default {
    data() {
      return {
      	supStartDate:"",
				supEndDate:"",
      	houseBox:[],
      	house:'',
      	fullTextFilterStr:'',
      	pageTools:{},
      	vue_tableH:200,
      	StockGoodsListData:[],
//--------------------------时间过滤查询-----------------------
        valueData:'',             //查询时间
        dateTimeMethod:{
        	  onPick(dateTime){
      			   this.valueData = dateTime;
      		}
      	},
      }
    },

    methods: {
//--------------根据时间进行过滤查询--------------------------
      dateChange(){
      	if(this.valueData != null && this.valueData != ""){
					this.supStartDate = this.valueData[0];
					this.supEndDate = this.valueData[1];
				}
				this.queryByPage();
     },
//--------------下拉查询------------------------------
			queryByDataBillstate(){
				this.queryByPage();
			},
      goTo(){
        this.$router.push('/keHu')
      },

      //---------------------分页查询-----------------------------
			handleSizeChange(val) {
				this.pageTools.pageSize = val;
				this.queryByPage();
			},

			handleCurrentChange(val) {
				this.pageTools.pageNo = val;
				this.queryByPage();
			},	


//			
		pp(data){
			localStorage.setItem("orderCode",data);
			localStorage.setItem("activeName","third");
			window.location.hash = "#/goods/goodsDetail"
		},
		queryByPage(){
			this.axios({
				method: 'post',
				url: "/v3/stock/goodsLists/queryStockByPage",
				data:{
					"offset":(this.pageTools.pageNo-1)*this.pageTools.pageSize,
					"limit":this.pageTools.pageSize,
					"fullTextFilterStr":this.fullTextFilterStr,
					"supStartDate":this.supStartDate,
					"supEndDate":this.supEndDate,
				}
				}).then((res) => {
					this.StockGoodsListData = res.data.list;
					this.pageTools=res.data.pageTools;
					this.pageTools.pageSizeOptions = JSON.parse(this.pageTools.pageSizeOptions);
				}).catch((err)=>{
				  this.Public.openError(this,err.response.data)
			});
			
		}




    },
    mounted(){
			/* start 动态给table高度 */
			this.vue_tableH = document.documentElement.clientHeight - 375;
			/* end 动态给table高度 */
			document.querySelector(".goodsContent").style.height = (document.documentElement.clientHeight - 280) + 'px';

			this.queryByPage();


    }
  }
</script>
<style scoped>

  .table-box {
    overflow-y: auto;
  }

  .yS_all {
    line-height: 34px;
    border-top: 1px solid #fa8a95;
    margin-top: 6px;
  }

  .yS_all span {
    display: block;
    float: left;
    width: 50%;
    text-align: center;
    font-size: 14px;
  }

  .div1 > .fund-totalBlance-val {
    padding-top: 25px;
  }

  .slideBtn {
    line-height: 34px;
    margin-right: 16px;
  }

  .ziJin-conOrder > .block {
    float: right;
    margin-top: 10px;
  }

  .el-form {
    overflow: hidden;
  }

  .el-form .el-form-item:last-child {
    width: 100%;
  }

  .el-form-item {
    width: 485px;
    float: left;
    margin-right: 10px;
  }

  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    background-color: rgba(240, 240, 240, 0.2);
  }

  .height-s-con {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
  }

  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
    margin-bottom: 20px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: .4s;
  }

  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

  .slideDown-enter-active, .slideDown-leave-active {
    transition: .4s;
  }

  .slideDown-enter, .slideDown-leave-active {
    height: 0;
    opacity: 0;
  }

  .p {
    text-indent: 10px;
    line-height: 30px;
    cursor: pointer;
  }

  .p em {
    position: relative;
    top: 2px;
    margin-right: 3px;
  }

  .p:hover {
    background: #eef1f9;
    color: #03B8CC;
  }

  .goTo:hover {
    color: #13c19f;
    cursor: pointer;
  }

  .fund-totalBlance-txt {
    font-size: 13px;
  }

  .fund-totalBlance-val {
    font-size: 28px;
    line-height: 42px;
  }

  .div1 {
    background: #fb7884;
    padding-top: 0px !important;
    height: 110px !important;
  }

  .div2 {
    background: #03a9f3;
  }

  .div3 {
    background: #9675ce;
    margin-right: 0px !important;
  }

  .moneyList > .moneyListCon > div {
    height: 85px;
    color: #fff;
    padding-top: 25px;
    text-align: center;
    margin-top: 15px;
  }
  .moneyList > .moneyListCon {
    float: left;
    position: relative;
    width: 25%;
  }

  .moneyList {
    width: 100%;
    height: 120px;
    margin-bottom: 10px;
    background-color: #fff;
  }

  section {
    display: flex;
    flex-direction: column;
    flex: 1;

  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.content {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 15px;
  }

  .ziJin-conOrder {
    padding: 0px 14px;
  }

  .zJ-header1 {
    padding: 8px 0;
    min-height: 34px;
  }

  .public-left {
    float: left;
  }

  .public-left:hover span {
    color: #13C19F;
  }

  .public-left a, .public-left span.search-openBtn {
    display: block;
    float: left;
    margin-right: 10px;
    padding-right: 0px;
    position: relative;
    height: 36px;
    line-height: 36px;
    z-index: 100;
    cursor: pointer;
  }

  .goods-input input {
    display: block;
    float: left;
    width: 290px;
    height: 34px;
    font-size: 12px;
    border: 0;
    margin-left: 20px;
  }

  .goods-input {
    float: left;
    width: 340px;
    border: 1px solid #cdd9e6;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    margin-left: 10px;
  }

  .goods-input:hover {
    border-color: #13C19F;
    transition: 1s;
  }

  .goods-input i {
    background: url(../../../img/sousuo.png) no-repeat;
    height: 20px;
    width: 20px;
    display: inline-block;
    position: relative;
    top: 7px;
    right: 5px;
    cursor: pointer;
  }

  .high_search {
    line-height: 36px;
    color: #93a6b7;
    margin-left: 4px;
    cursor: pointer;
  }

  .high_search:hover {
    color: #13C19F;
  }
	.block{
		float: right;
	}
	.dingdanshou{
		float: left;
	}
	.fen{
		margin-top: 20px;
	}
	.piliangCao a{
		cursor: pointer;
	}
</style>
